<template>
  <div class="login_page">
    <div class="login_box">
      <p class="login_title">综合管理平台</p>
      <div class="login_input" :class="{'error_border':tipNum===1||tipNum===-1}">
        <input type="text" placeholder="请输入用户名" v-model="username" @keyup.enter="login"></input>
      </div>
      <div class="login_input" :class="{'error_border':tipNum===2||tipNum===-1}">
        <input type="password"  autocomplete="new-password" placeholder="请输入密码" v-model="password" @keyup.enter="login"></input>
      </div>
      <p class="tip">{{logTip}}</p>
      <span class="login_btn" @click="login">{{loading?'登录中...':'登录'}}</span>
  </div>
  </div>
</template>

<script>
import {login} from '../api/user';
import {setUser} from '../utils/user'
import {setFirst, setSecond} from "../utils/menuIndex";
import {getToken} from "../utils/auth";
import {getWebMenu} from "../api/permission";
import {getPlatformCode} from "../utils/code";
import {setHorizontalMenu} from "../utils/menuAuth";

export default {
  name: 'login',
  data () {
    return {
      username: '',
      password: '',
      tipNum: '',
      logTip: '',
      loading: false,
      automatic: false,
    }
  },
  methods:{

    // 登录
    login() {
      if (this.username === '') {
        this.logTip = '账号不能为空';
        this.tipNum = 1;
      } else if (this.password === '') {
        this.logTip = '密码不能为空';
        this.tipNum = 2;
      } else {
        this.goIndex();
      }
    },
    goIndex() {
      let that = this;
      that.loading = true;
      let params = {
        userName:that.username.trim(),
        password:that.password.trim()
      }
      login(params, 'application/x-www-form-urlencoded').then(res => {
        if (res.success) {
          that.loading = false;
          if (that.automatic) {
            let obj = JSON.stringify({account:that.account,password:that.password});
            localStorage.setItem('remember',obj);
          } else {
            localStorage.removeItem('remember');
          }
          setUser(JSON.stringify(res.data));
          // 判断是否从其他服务跳转过来，是：登录后返回指定页面，否，回首页
          let href = that.$route.query.url;
          if (href){
            let url = 'http://'+href.split('http://')[1].split('/')[0];
            location.href = url + '/transfer?t=' + getToken() + '&url=' + href;
          }else {
            setFirst(0);
            setSecond(0);
            that.getMenu();
          }
        } else {
          that.loading = false;
        }
      })
    },
    getMenu() {
      // type:1竖向菜单  -1横向菜单
      getWebMenu({type: -1,platformCode:getPlatformCode()}).then((res) => {
        if (res.data) {
          setHorizontalMenu(JSON.stringify(res.data));
          // 获取竖向菜单
          getWebMenu({type: 1,platformCode:res.data[0].platformCode}).then((menu) => {
            let data = menu.data;
            setHorizontalMenu(JSON.stringify(data));
            if (this.$route.query.url){
              location.href = this.$route.query.url;
            }else {
              // 无子菜单情况
              if (data[0].url) {
                this.setRouter(data[0].url, data[0].id);
              } else {
                if (data[0].childPermissions && data[0].childPermissions[0].url) {
                  this.setRouter(data[0].childPermissions[0].url, data[0].childPermissions[0].id);
                } else {
                  this.$router.push('/errorPage');
                }
              }
            }
          })
        } else {
          this.$message.error('抱歉，无权访问！')
        }
      })
    },

    setRouter(url, id) {
      localStorage.setItem('index', id);
      this.$router.push({
        path: url,
        query: {
          key: id,
        }
      });
    }
  }
}
</script>

<style scoped>
.login_page{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  min-height:600px;
  position: fixed;
  background-image: url("../assets/img/login_bg.jpg");
}
.login_box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.login_title{
  font-size: 28px;
  margin-bottom: 30px;
}
.login_input input{
  width: 100%;
  line-height: 42px;
  box-sizing: border-box;
  padding:0 5px;
  margin-top: 30px;
  font-size: 16px;
  color: #427EF1;
  background: none;
  outline: none;
  border: 1px solid #5ca4fa;
}
.login_btn{
  display: block;
  margin-top: 40px;
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  font-size: 20px;
  border-radius: 5px;
  letter-spacing: 2px;
  cursor: pointer;
  color: white;
  background-color: #5ca4fa;
}
.tip{
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: #e40000;
  padding-left: 5px;
  line-height: 22px;
  height: 22px;
  text-align: left;
}


</style>
